<template>
	<view class="container">
		<u-sticky>
			<view class="tab">
				<view :class="['tab-item', { current: current == 0 }]" @click="toggle(0)">未使用</view>
				<view :class="['tab-item', { current: current == 1 }]" @click="toggle(1)">已使用</view>
			</view>
		</u-sticky>
		<view class="list" v-if="state.list.length">
			<view class="list-box">
				<view class="list-item">
					<view class="total">
						共计
						<text class="red">{{ state.total }}</text>
						个
					</view>
				</view>
				<view class="list-item" v-for="(item, index) in state.list" :key="index">
					<view class="label">{{ item.code }}</view>
					<view class="copy" @click="copy(item.code)" v-if="current == 0">复制</view>
					<view class="go" @click="gotoPage(item.id)" v-if="current == 1">
						<view class="msg">已激活</view>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else style="height: 80%">
			<u-empty text="暂无数据" mode="list"></u-empty>
		</view>
		<view class="bigBtn" @click="gotoBuhuo">申请补货</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { get } from '@/request/index.js';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';

onLoad(() => {
	getDataList();
});
onReachBottom(() => {
	state.page++;
	if (state.page > state.totalPage) return uni.showToast({ title: '我也是有底线的 ~' });
	getDataList();
});
let current = ref(0);
const toggle = (n) => {
	current.value = n;
	state.page = 1;
	getDataList();
};
const state = reactive({
	page: 1,
	total: 1,
	totalPage: 1,
	list: []
});
const getDataList = async () => {
	const params = {
		page: state.page,
		status: current.value
	};
	const res = await get('agent/change/index', params);
	const { code, data } = res;
	if (code == 200) {
		state.list = data.data;
		state.total = data.total;
		state.totalPage = data.last_page;
	}
};
//跳页面
const gotoPage = (id) => {
	uni.navigateTo({
		url: `/pages/jihuodetail/jihuodetail?id=${id}`
	});
};
//复制
const copy = (data) => {
	uni.setClipboardData({
		data: data
	});
};
//申请补货
const gotoBuhuo = () => {
	uni.navigateTo({
		url: '/pages/shenqingbuhuo/shenqingbuhuo'
	});
};
</script>

<style scoped lang="scss">
.tab {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	&-item {
		position: relative;
		width: 50%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		color: #9c9c9c;
		z-index: 1;
	}
	.current {
		color: #ff5668;
		&::after {
			position: absolute;
			left: 50%;
			bottom: 0;
			content: '';
			width: 44rpx;
			height: 4rpx;
			transform: translate(-50%, 0);
			background-color: #ff5668;
			z-index: 2;
		}
	}
}
.list {
	padding: 20rpx 32rpx 160rpx;
	&-box {
		padding: 0 28rpx 100rpx;
		background-color: #fff;
		border-radius: 24rpx;
	}
	&-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 0;
		border-bottom: 2rpx solid #e9e9e9;
		.label {
			font-size: 28rpx;
		}
		.copy {
			font-size: 24rpx;
			color: #ff5668;
		}
		.go {
			display: flex;
			align-items: center;
			.msg {
				font-size: 24rpx;
				color: #9c9c9c;
			}
		}
		.total {
			font-size: 28rpx;
		}
		.red {
			color: #ff5668;
		}
	}
}
</style>
